<template>
    <div>
        <el-card>
            <div>
                <el-form>
                    <el-form-item label="搜索">
                        <el-input class="input" placeholder="输入用户昵称、账号、邮箱" v-model="key" clearable @clear="getUserList()"></el-input>
                        <el-button type="primary" class="btn" icon="el-icon-search" @click="searchUser">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="userList"
                    border
                    style="width: 100%"
                >
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="createdAt"
                        sortable
                        label="创建时间" >
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="nickname"
                        label="昵称" >
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="username"
                        label="账号" >
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="email"
                        label="邮箱" >
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="role"
                        label="账号权限" >
                        <template slot-scope="scope">
                            <div v-show="scope.row.role==0">学生</div>
                            <div v-show="scope.row.role==1">管理员</div>
                            <div v-show="scope.row.role==2">超级管理员</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="status"
                        label="账号状态">
                        <template slot-scope="scope">
                            {{scope.row.status==0?'正常':'禁用'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        label="操作" >
                        <template slot-scope="scope">
                            <el-switch
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                v-model="scope.row.state"
                                @change="updateUserStatus(scope.row)"
                                :disabled="(scope.row.role==2||scope.row.role==1)&&role!=2"
                            >
                            </el-switch>
                            <span v-show="scope.row.state" class="state">禁用</span>
                            <span v-show="!scope.row.state" class="state">已禁用</span>
                        </template> 
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @prev-click="gotoPrePage"
                    @next-click="gotoNextPage"
                    :total="allPage">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import {getUserList,updateUserStatus,searchUser} from '@/api/user'
import {getCookie} from '@/utils/cookie'
export default {
    name:"userManagement",
    data() {
        return {
            key:'',//搜索关键词
            userList:[],//用户列表
            page:1,//当前页码
            allPage:1,//全部页数
            status:0,//记录网页当前状态，搜索状态和展示状态，0表示展示状态，1表示搜索状态
            role:0,//当前用户权限
        }
    },
    watch:{
        key(newValue){
            if(newValue==''){
                this.status = 0
                this.getUserList()
            }
        }
    },
    mounted(){
        this.role = getCookie('role')
        this.getUserList()
    },
    methods:{
        getUserList(){
            //获取用户列表
            getUserList({
                page:this.page
            }).then(res=>{
                this.userList = res.data.info
                this.userList.forEach(item=>{
                    let status = item.status ==0 ? true:false
                    this.$set(item,'state',status)
                    item.createdAt = this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm')
                })
                this.allPage = Math.ceil(res.data.number/10)
            })
        },
        //更新用户状态
        updateUserStatus(person){
            console.log(person)
            let status = person.state ? 0 : -1
            updateUserStatus({
                user_uid:person.uid,
                status
            }).then(res=>{
                if(res.status==200){
                    this.$message({
                       type:'success',
                       showClose:true,
                       duration:1000,
                       message:'操作成功'
                    })
                }else{
                    this.$message({
                       type:'error',
                       showClose:true,
                       duration:1000,
                       message:'操作失败'
                    })
                }
            })
        },
        // 用户点击下一页
        gotoNextPage(){
            this.page = this.page+1
            if(this.status==0){
                this.getUserList()
            }
            else{
                this.searchUser()
            }
        },
        // 用户点击上一页
        gotoPrePage(){
            this.page = this.page-1
            if(this.status==0){
                this.getUserList()
            }
            else{
                this.searchUser()
            }
        },
        //搜索用户
        searchUser(){
            this.status = 1
            //初始化当前页面
            this.page = 1
            searchUser({
                key:this.key,
                page:this.page
            }).then(res=>{
                this.userList = res.data.info
                this.userList.forEach(item=>{
                    let status = item.status == 0 ? true:false
                    this.$set(item,'state',status)
                    item.createdAt = this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm')
                })
                this.allPage = Math.ceil(res.data.number/10)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.input{
    width: 300px;
}
.btn{
    margin-left: 15px;
}
//分页
.pagination{
    display: flex;
    margin-top: 20px;
    justify-content: center;
}
.state{
    display: inline-block;
    width: 50px;
}
</style>